import React, { useState } from 'react'
import { Divider, Button, Space, Alert, Col, Row } from 'antd'


const MyButton = () => {
    const [count, setCount] = useState(0)

    const handleClick = () => {
        setCount(count + 1)
    }

    return (
        <Button onClick={handleClick}>
            Clicked {count} times
        </Button>
    )
}

const MyButton2 = ({ count, onClick }: any) => {

    return (
        <Button onClick={onClick}>
            Clicked {count} times
        </Button>
    )
}

const View: React.FC = () => {

    const [count2, setCount2] = useState(0);

    function handleClick2() {
        setCount2(count2 + 1);
    }

    return (
        <>
            <Divider orientation="left">更新界面</Divider>
            <Alert
                message="useState："
                description="如果你多次渲染同一个组件，每个组件都会拥有自己的 state。你可以尝试点击不同的按钮："
                type="warning"
            />
            <h1>Counters that update separately</h1>
            <Space direction="vertical">
                <MyButton />
                <MyButton />
            </Space>

            <Divider orientation="left">组件间共享数据</Divider>
            <Space>
                <h1>Counters that update together</h1>
                <MyButton2 count={count2} onClick={handleClick2} />
                <MyButton2 count={count2} onClick={handleClick2} />
            </Space>
            <Alert className='mt-2'
                message="更新状态中的对象或数组时，需要创建一个新的对象或数组，然后用这个副本来更新状态"
                description="https://zh-hans.reactjs.org/learn/adding-interactivity#updating-arrays-in-state"
                type="info"
            />
        </>
    )
}

export default View